<template>
  <div id="app">

    <el-container id="admincontainer">

      <el-header height="60px">
        <myheader />
      </el-header>

      <el-container style="background-color: white">

        <el-aside width="15%">
          <el-menu 
          :default-active="activerouter"
          :router="true" 
          :active="activerouter"
          @select="select">
<!-- 
            <router-link to="/adm/">
              <el-menu-item index="/adm/">
                <i class="el-icon-menu"></i>
                <span slot="title">功能开关</span>
              </el-menu-item>
            </router-link> -->

            <router-link to="/adm/">
              <el-menu-item index="/adm/">
                <i class="el-icon-user-solid"></i>
                <span slot="title">用户信息</span>
              </el-menu-item>
            </router-link>


            <router-link to="/adm/kg">
              <el-menu-item index="/adm/kg">
                <i class="el-icon-document"></i>
                <span slot="title">知识仓库</span>
              </el-menu-item>
            </router-link>

            <router-link to="/adm/check">
              <el-menu-item index="/adm/check">
                <i class="el-icon-s-check"></i>
                <span slot="title">提交审核</span>
              </el-menu-item>
            </router-link>

            <router-link to="/adm/edit">
              <el-menu-item index="/adm/edit">
                <i class="el-icon-edit"></i>
                <span slot="title">编辑词条</span>
              </el-menu-item>
            </router-link>

            <router-link to="/adm/message">
              <el-menu-item index="/adm/message">
                <i class="el-icon-edit"></i>
                <span slot="title">意见反馈</span>
              </el-menu-item>
            </router-link>

            <el-divider content-position="center"></el-divider>

            <el-menu-item index="统计面板">
              <i class="el-icon-odometer"></i>
              <span slot="title">统计面板</span>
            </el-menu-item>

            <el-menu-item index="开发者选项">
              <span slot="title">&lt;/&gt; 开发者选项</span>
            </el-menu-item>

          </el-menu>

        </el-aside>

        <el-main>
          <el-page-header :content='ctnt' @back='ret'></el-page-header>

          <div class="main_page">

            <router-view v-if="isUpdated"></router-view>
       
          </div>

        </el-main>
        
      </el-container>
    </el-container>
  </div>
</template>

<script>
import myheader from "@/components/header.vue"
import request from "@/api/client.js"

const map = {
  '/adm/': '用户信息',
  '/adm/uinfo': '用户信息',
  '/adm/rg': '权限管理',
  '/adm/fs': '功能开关',
  '/adm/kg': '知识仓库',
  '/adm/check': '提交审核',
  '/adm/edit': '编辑词条',
  '/adm/message': '意见反馈'
}

export default {
  name: "App",
  data () {
    return {
      ctnt: '',
      activerouter: '',
      ison: true,
      isUpdated: true,
      navSelected: '/adm/'
    } 
  },

  provide() {
    return {
      reload: this.reload
    }
  },

  mounted() {
    // this.activerouter = this.$route.path
    console.log('Router.Path: ' + this.$route.path)
    this.activerouter = window.location.pathname
    console.log('Window Location: ' + window.location.pathname)
    this.ctnt = map[this.activerouter]
  },

  created() {
    console.log('Adm 组件 Created')
    // this.getUsers()
  },

  beforeRouteUpdate(to, from, next) {
    this.activerouter = to.path
    this.ctnt = map[this.activerouter]
    next()
  },

  methods: {

      ret() {
        this.$router.go(-1)
      },

      open: function(ison, row) {
        
        this.$message({
          message: row + ' 已' + (ison ? '开启' : '关闭'),
          type: 'success',
          duration: 1000
        })
      },

      select: function(index, indexPath) {
        this.ctnt = map[index]
      },

      getUsers() {
        console.log('请求')
        request.getList().then(resp => {
          this.ctnt = resp.data[0].userName
        })
      },

      reload() {
        this.isUpdated = false
        this.$nextTick(() => {
          this.isUpdated = true
        })
      }
  },

  components: {
    // Header
    myheader
  }
}
</script>


<style lang="scss">

.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    padding: 0px;
    width: 100%;
    line-height: 20px;
    background-color: white;
  }

html, body {
  margin: 0px;
  height: 100%;
}

a {
  text-decoration: none;
}



#app {
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
  // overflow: hidden;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;
    // 2c3e50

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

#admincontainer .el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  border-style: solid;
  border-width: 0px;
  padding: 0 0;
  // text-align: center;
  // line-height: 60px;
}
  
  .el-aside {
    position: relative;
    width: 15%;
    z-index: 9;
    // box-shadow: 0 2px 8px rgba(0, 0, 0, .32), 0 0 6px rgba(0, 0, 0, .04);
    background-color: #f7f8fa;
    color: #333;
    text-align: center;
    line-height: 100px;
    height: 100%;
    border-right: 1px #e6e6e6 solid;
  }
  
  // #E9EEF3
  #admincontainer .el-main {
    position: fixed;
    background-color: #fff;
    color: #333;
    text-align: center;
    height: 100%;
    left: 15%;
    width: 85%;
    height: 660px;
    padding: 0px 0px 0px 0px;
    overflow-y: auto;
  }
  
  .el-container {
    height: 100%;
  }


  .el-page-header {
    background-color: white;
    padding: 18px 5px;
  }

  .el-menu {
    background-color: #f7f8fa;
    padding: 0px 0px;
    border-right-width: 0px;
  }

  .el-menu-item.is-active {
    background-color:#e3e8f0;
    box-shadow:inset 5px 0px 0 0 #409EFF;
  }

  el-aside .el-divider {
    width: 80%;
    margin: 0px 10% 0px 10%;
  }

  .main_page {
    background-color: rgba($color: #FFF, $alpha: 1.0);
    padding: 10px 3%;
  }

</style>


